<template>
  <div class="details">
    <div class="details-contnent" v-if="details">
      <div class="details-img">
        <img :src="`https://ss.lanqb.com/${details.posters.banner}`" alt="" />
      </div>
      <div class="des">
        <h3>
          <span>{{ details.title }}</span
          ><em>直播</em>
        </h3>
        <p>
          <span>本期嘉宾:{{ details.cooperator.nickname }} | </span>
          <span>直播时间:{{ details.begin_at }}</span>
        </p>
      </div>
      <div class="d-tabs">
        <span>本期介绍</span>
        <span>大触周边</span>
      </div>
      <div class="d-item">
        <div class="d-live-introduce">
          <h2><strong>本期介绍</strong></h2>
          <p>{{ details.introduction }}</p>
          <div class="d-live-video">
            <p>视频无法播放，请稍后重试...</p>
          </div>
        </div>
        <div class="d-live-list02">
          <img
            src="https://assets-cdn.lanqb.com/imgv3/image/dc-tagbg_m@2x.png"
            alt=""
          />
          <h3>本期大触</h3>
          <div class="info">
            <div class="cover">
              <img
                src="https://ss.lanqb.com/210b5321-1482-41e7-8fac-6d04fdf568d2.jpg?imageView2/1/w/200/h/200"
                alt=""
              />
            </div>
            <div class="cover-right">
              <h4>{{ details.cooperator.nickname }}</h4>
            </div>
          </div>
          <p>{{ details.teacher_info.introduction }}</p>
        </div>
        <!-- 大触作品 -->
        <div class="d-list-works">
          <h2 class="d-list-works-title"><strong>大触作品</strong></h2>
          <div class="d-list-works-pic">
            <div
              class="d-list-content"
              v-for="item in details.daniu_class_teacher_works"
              :key="item.id"
            >
              <img :src="`https://ss.lanqb.com/${item.cover_picture}`" alt="" />
            </div>
          </div>
        </div>
        <!-- 评论 -->
        <div class="d-list-comment">
          <h2><strong>评论</strong></h2>
          <div class="d-list-comment-text">
            <div class="textarea-areas">
              <textarea
                name=""
                id=""
                cols="6"
                rows="5"
                maxlength="1000"
                sensors-disable="true"
              ></textarea>
            </div>
            <div class="counter"><span>0</span>/1000</div>
          </div>
          <div class="d-list-comment-handle">
           <div class="comments-tips">
            <a href="#" style="color:orange">登录</a>后才能进行评论哦!
           </div>
           <p>没有数据了</p>
          </div>
        </div>
        <!-- footer -->
        <footer class="course-footer">
          <span>￥10.00</span>
          <div class="btn-apply">
            <div class="teach-btn">
              <button>
                联系老师
              <span>领一次免费听课劵</span>
              </button>
            </div>
            <div class="register-btn">
              <button>立即报名
              <span>(2022人感兴趣)</span>
              </button>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DachuLiveInfo",

  data() {
    return {
      details: "", // "" null undifined  都是 false
      pageId: null,
    };
  },

  methods: {},
  created() {
    this.pageId = this.$route.params.id;
    fetch(`https://m.lanqb.com/api/daniu/${this.pageId}`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.details = data;
        console.log(this.details);
      });
  },
};
</script>

<style lang="scss">
.details {
  height: calc(100vh - 48px - 44px - 56px - 10px);
  overflow-y: scroll;
  .details-contnent {
    .details-img {
      overflow: hidden;
      img {
        width: auto;
        height: 160px;
      }
    }
    .des {
      width: 100%;
      height: 85px;
      box-sizing: border-box;
      padding: 15px;
      background-image: linear-gradient(134deg, #242f32, #0e1917);
      margin-top: -3px;
      h3 {
        display: flex;
        justify-content: space-between;
        span {
          display: block;
          font-size: 20px;
          color: #fff;
          margin: 6px 0;
        }
        em {
          display: inline-block;
          font-style: normal;
          font-size: 14px;
          color: #634b19;
          border-radius: 4px;
          background-color: #edce8c;
          padding: 0 5px;
          height: 24px;
          line-height: 24px;
          margin-right: 36px;
        }
      }
      p {
        color: hsla(0, 0%, 100%, 0.6);
      }
    }
    .d-tabs {
      height: 55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #212b34;
      font-weight: 500;
      font-size: 24px;
      box-sizing: border-box;
      span {
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      span:nth-child(1) {
        border-right: 1px solid #ccc;
      }
    }
    .d-item {
      padding: 0 15px;
      box-sizing: border-box;
      .d-live-introduce {
        background-color: #eee;
        width: 100%;
        h2 {
          margin: 20px 0px;
          strong {
            font-size: 20px;
          }
        }
        p {
          color: #434343;
          font-size: 14px;
          text-align: justify;
          line-height: 22px;
        }
        .d-live-video {
          width: 100%;
          height: 225px;
          background-color: gray;
          border-radius: 5px;
          margin: 10px 0;
          border-bottom: 1px solid #cfcfcf;
          p {
            height: 100%;
            line-height: 225px;
            text-align: center;
          }
        }
      }
      .d-live-list02 {
        background: #1aaf94;
        width: 100%;
        height: 390px;
        box-sizing: border-box;
        padding: 20px;
        position: relative;
        > img {
          width: 82px;
          height: 30px;
          position: absolute;
          left: -5px;
          top: 20px;
        }
        h3 {
          color: #634b19;
          position: absolute;
          left: -5px;
          top: 25px;
        }
        .info {
          height: 180px;
          display: flex;
          justify-content: center;
          align-items: center;
          .cover {
            img {
              width: 93px;
              height: 93px;
              border-radius: 50%;
            }
          }
          .cover-right {
            h4 {
              color: #fff;
              margin-left: 10px;
              font-size: 24px;
            }
          }
        }
        p {
          padding-top: 40px;
          border-top: 1px solid #f0f0f0;
          color: hsla(0, 0%, 100%, 0.6);
          font-size: 15px;
          line-height: 20px;
        }
      }
      /* 大触作品 */
      .d-list-works {
        h2 {
          margin: 20px 0px;
          strong {
            font-size: 20px;
          }
        }
        .d-list-works-pic {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          img {
            width: 185px;
            height: 138px;
            border-radius: 10px;
          }
        }
      }
      /* 评论 */
      .d-list-comment {
        h2 {
          margin: 20px 0px;
          strong {
            font-size: 20px;
          }
        }
        .d-list-comment-text {
          position: relative;
          .textarea-areas {
            background-color: hsla(0, 0%, 93%, 0.3);
            border: 1px solid #ececec;
            border-radius: 10px;
            textarea {
              width: 100%;
              background-color: transparent;
              border: none;
              font-family: pingFang;
            }
          }
            .counter {
              position: absolute;
              right: 10px;
              bottom: 7px;
            }
        }
        .d-list-comment-handle{
          .comments-tips{
            color:gray;
            margin: 15px 0;
          }
          p{
            font-size: 12px;
            color:#cfcfcf;
            text-align: center;
            margin-top:25px;
          }
        }
      }
    }
  }
}
</style>
